<template>
  <div>
    <el-dialog title="园地信息" :visible.sync="dialogFormVisible">
      <el-form :model="form"
        v-loading="fetchLoading"
        class="sectionForm"
        size="mini"
        element-loading-text="数据加载中,请耐心等待..."
        label-width="80px"
        label-position="right"
    >
        <el-row>
          <el-col :span="24">
            <el-form-item label="园地名称">
              <el-input v-model="form.gardenName" autocomplete="off" size="mini" placeholder="园地名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="园地面积">
              <el-input v-model="form.gardenArea" autocomplete="off" size="mini"  placeholder="园地面积(亩)"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="土壤情况">
               <el-select v-model="form.gardenSoil" placeholder="土壤情况" style="width:100%">
                <el-option label="优秀" value="best"></el-option>
                <el-option label="良好" value="better"></el-option>
                <el-option label="差" value="worse"></el-option>
                <el-option label="污染严重" value="worst"></el-option>
              </el-select>
             </el-form-item>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="12">
            <el-form-item label="种植品种">
              <el-select v-model="form.gardenVar" placeholder="种植品种">
                <el-option label="苹果" value="apple"></el-option>
                <el-option label="香蕉" value="banana"></el-option>
              </el-select>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种植数量">
              <el-input v-model.number="form.gardenSnum" autocomplete="off" placeholder="种植数量(棵)" @blur="change"></el-input>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="购苗单价">
              <el-input v-model="form.price" autocomplete="off" size="mini" placeholder="购苗单价(元)" @blur="change" ></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购苗金额">
              <el-input v-model.number="form.money" autocomplete="off" placeholder="购苗金额(元)" disabled></el-input>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="种植费用">
              <el-input v-model.number="form.cost" autocomplete="off" size="mini" placeholder="种植费用(元)" @blur="change"></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总费用">
              <el-input v-model.number="form.totalCost" autocomplete="off" placeholder="总费用(元)" disabled></el-input>
             </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="种植日期">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.plantDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="type==='add'" @click="add">确认添加</el-button>
        <el-button type="primary" v-else @click="add">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default{
  name:'add',
  props:{
    type:{
      type:String,
    }
  },
  data(){
    return {
      dialogFormVisible:false,
      fetchLoading: false,
      form: {
        gardenName:"",
        gardenArea:0,
        gardenSoil: 0,
        gardenVar:"",
        gardenSnum:0,
        price:0,
        money:0,
        cost:0,
        totalCost:0,
        plantDate:"",
        remark:"",
      },
    }
  },
  created(){
    // console.log(this.updateRow,1111)
    // this.form=this.updateRow?this.updateRow:this.form
    // console.log(this.form,22)

  },
  methods:{
    change(){
      this.form.money=this.form.gardenSnum*this.form.price
      this.form.totalCost=this.form.money+this.form.cost
    },
    cancel(){
      this.dialogFormVisible = false
      Object.assign(this.$data.form, this.$options.data().form)
    },
    async add(){
      this.dialogFormVisible = false
      // this.$emit("save",)
      try{
        let res=await this.$API.gardenInfo.saveOrUpdate(this.form)
        if(res.code==200){
          this.$message({type:"success",message:this.type==="add"?"添加成功":"修改成功"})
          this.$parent.updatePageList()
          Object.assign(this.$data.form, this.$options.data().form)
        }
      }catch{
        this.$message({type:"error",message:this.type==="add"?"添加失败":"修改失败"})
      }
    }
  }
}
</script>

<style scoped>
</style>